<template>
  <a-modal
      v-model:visible="visible"
      title="详情"
      ok-text="确认"
      :hideCancel="true"
      :mask-closable="false"
      @cancel="handleCancel"
      @before-ok="handleSubmit"
      width="90%"
      style="min-width: 900px"
  >
    <div class="flex-column">
      <div class="flex-row" style="align-items: center;margin: 10px">
        <span style="margin-right: 20px">左边为此次配置，右边为上次配置。配置变更时间: {{ data.createTime }}</span>
        <a-button type="outline" @click="backHandler('left')">回滚到<b
            style="color: red">左边</b>版本
        </a-button>
        <a-button type="outline" @click="backHandler('right')" style="margin-left: 20px">回滚到<b
            style="color: red">右边</b>版本
        </a-button>
      </div>
      <div class="flex-row" style="height: 98%;width: 100%">
        <div ref="diffRef" id="diff"></div>
      </div>
      <submitBack ref="submitBackRef" @success="successEvent"/>
    </div>
  </a-modal>
</template>

<script setup>
import apiAll from "@/api/apiAll.js";
import {ref} from "vue";
import {makeDiff} from '@sanity/diff-match-patch'
import {MergeView} from '@codemirror/merge';
import {lineNumbers} from '@codemirror/view'
import submitBack from './submitBack.vue'

if (!window.diff_match_patch)
  window.diff_match_patch = makeDiff

const emits = defineEmits(["success"]);
const visible = ref(false);
const data = ref({})
const editor = ref()
const diffRef = ref()
const submitBackRef = ref()
const handleSubmit = (done) => {
  done()
};
const backHandler = (type) => {
  submitBackRef.value.show(data.value.id, type)
}

const handleCancel = () => {
  visible.value = false;
};
const successEvent = () => {
  emits('success')
  visible.value = false;
}

const showXml = () => {
  editor.value = new MergeView({
    a: {
      doc: data.value.xml,
      extensions: [lineNumbers()],
      connect: 'align',
      readOnly: true,//只读 不可修改
      width: '80vw',
      height: '800px'
    },
    b: {
      doc: data.value.old,
      extensions: [lineNumbers()]
    },
    highlightChanges: true,
    parent: diffRef.value,
  })
}

const show = (id) => {
  apiAll.configApi.historyDetail(id).then(res => {
    data.value = res.data
    data.value.id = id
    showXml()
    visible.value = true;
  })
};

defineExpose({show});
</script>
<style>
.cm-mergeView {
  width: 80vw;
  height: 500px;
}

.cm-merge-b {
  margin-left: 10px;
  border-left: 1px solid red;
}

.cm-deletedLine {
  background-color: #a4f07e;
}

.cm-insertedLine {
  background-color: #f9a9a9;
}
</style>
